<template>
	<view class="main" :style="allStyle()">
		<!-- <u-navbar title="设施列表" :safeAreaInsetTop="true" bgColor="#ff5000"
			:titleStyle="{ fontWeight:'bold',color:'white' }" leftIconColor="#FFF" :autoBack="true" :placeholder="true">
			<view style="margin-left:20px;" class="u-nav-slot" slot="center">
				u-search v-model="searchKey" @clear="clearSearch" @search="doSearch" style="width:80vw"
					:showAction="false"></u-search>
			</view>
		</u-navbar> -->

		<!-- 搜索框 -->
		<view class="topxq" style="margin: 10px 16px;">
			<u-search placeholder="项目名称" v-model="queryParam.xmmc" :showAction="false" style="" bgColor="#FFFFFF"
				borderColor=" rgba(255, 80, 0, 0.85)" @change="search" @focus="showQuery=true"></u-search>
		</view>

		<!-- 搜索内容 -->
		<scroll-view v-show="showQuery" :style="getHeight()" scroll-y="true">
			<view class="noSearch" v-show="queryList.length==0">
				<div style="height: 100px;"></div>
				<view class="a" v-show="!isOk">
					<div style="height: 100px;"></div>
					<u-loading-icon mode="circle" size="50px"></u-loading-icon>
				</view>
				<view class="b" v-show="isOk">
					<view class="ccccccc" v-show="!notQxa">
						<u-empty mode="search" text="暂无数据" @click.native="showQuery=false"></u-empty>
					</view>
					<view class="ddddddd" v-show="notQxa">
						<u-empty mode="page" text="加载失败"></u-empty>
					</view>
				</view>
			</view>
			<view class="query-list">
				<u-list :lowerThreshold="10" @scrolltolower="scrolltolowerYN()">
					<u-list-item v-for="(item, index) in queryList" :key="index">
						<u-cell customStyle="padding-Left: 20rpx " :title="item.xmmc + ' - ' + item.facilities_type"
							@click="handClickFacility(item)">
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</scroll-view>

		<!-- 主体 -->
		<scroll-view v-show="!showQuery" :style="getHeight()" scroll-y="true">
			<view class="noSearch" v-show="facilityList.length==0">
				<div style="height: 100px;"></div>
				<view class="a" v-show="!isOk">
					<div style="height: 100px;"></div>
					<u-loading-icon mode="circle" size="50px"></u-loading-icon>
				</view>
				<view class="b" v-show="isOk">
					<view class="ccccccc" v-show="!notQxb">
						<u-empty mode="search" text="暂无数据"></u-empty>
					</view>
					<view class="ddddddd" v-show="notQxb">
						<u-empty mode="page" text="加载失败"></u-empty>
					</view>
				</view>
			</view>
			<u-list :lowerThreshold="10" @scrolltolower="scrolltolowerYN()">
				<u-list-item v-for="(item, index) in facilityList" :key="index" @click.native="itemClick(item)"
					style="background-color: #FFFFFF;">
					<view class="t">
						<div><u-line></u-line></div>
					</view>
					<view class="b" style="display: flex;flex-direction: row;margin: 0px 16px;align-items: center;">
						<view class="left" style="margin-top: 10px;margin-bottom: 10px;">
							<u--image style="" radius="5" :src="item.zpdz==null?'/static/icons/no_img.png':item.zpdz"
								:width="getWidth()" :height="getWHeight()">
							</u--image>
						</view>
						<view class="right" style="margin:10px 0px 10px 10px;display: flex;flex-direction: column;">
							<u-text bold size="16" :text="item.facilities_type" style="margin-bottom: 5px;"></u-text>
							<u-text type="info" :text="item.xmmc"></u-text>
							<view class="temp" style="display: flex;">
								<u-text size="13" type="info" :text="'当前状态：' + item.dqzt"></u-text>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</scroll-view>

	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');




	import coordtransform from 'coordtransform';
	import {
		queryFacility,
		getDictionaryData,
		getFacilityListByXmmc
	} from '@/common/api.js';
	export default {
		data() {
			return {
				queryParam: {
					pageNum: 1,
					pageSize: 20,
					xmmc: ""
				},
				showQuery: false,
				facilityList: [],
				facilityType: [],
				queryList: [],
				isOver: false,
				isOk: false,
				notQxa: false,
				notQxb: false,
			}
		},
		onShow() {
			document.body.style.overflow = 'auto';
		},
		methods: {
			// 	let that = this;
			// 	that.pageNum = 1;
			// 	try {
			// 		const res = await getFacilityListByXmmc({
			// 			pageNum: that.pageNum,
			// 			pageSize: that.pageSize,
			// 			xmmc: ""
			// 		});
			// 		that.facilityList = res.list.map(item => {
			// 			item.facilities_type = that.facilityType.find(i => i.id == item.facilities_type).name;
			// 			item.dqzt = item.dqzt == 0 ? "停用" : item.dqzt == 1 ? "在用" : "建设中";
			// 			return item;
			// 		});
			// 	} catch (e) {}
			// },
			async search() {
				let that = this;
				try {
					const result = await getFacilityListByXmmc({
						...that.queryParam
					});
					let data = []
					data = result.list.map(item => {
						item.facilities_type = that.facilityType.find(i => i.id == item.facilities_type).name;
						item.dqzt = item.dqzt == 0 ? "停用" : item.dqzt == 1 ? "在用" : "建设中";
						return item;
					});
					that.queryList = data
				} catch (error) {
					// 处理请求失败的逻辑
					/* console.error(error); */
				}
			},
			async handClickFacility(item) {
				try {
					this.facilityList = [item];
					this.showQuery = false;
					this.queryParam.xmmc = '';
				} catch (error) {
					/* console.error(error); */
				}
			},
			/* 触底刷新 */
			async scrolltolowerYN() {
				let that = this
				if (that.isOver) {
					return
				} else {
					that.queryParam.pageNum += 1
					const res = await getFacilityListByXmmc(that.queryParam);
					that.isOver = res.nextPage == 0 ? true : false
					let data = []
					data = res.list.map(item => {
						item.facilities_type = that.facilityType.find(i => i.id == item.facilities_type).name;
						item.dqzt = item.dqzt == 0 ? "停用" : item.dqzt == 1 ? "在用" : "建设中";
						return item;
					});
					that.facilityList = that.facilityList.concat(data)
					that.queryList = that.facilityList
				}
			},
			/* 详情跳转 */
			itemClick(item) {
				uni.$u.route({
					url: `/pages/hmss/ssxq/index?id=${item.id}`
				});
			},
			/* 样式类 */
			getHeight() {
				let a = uni.getSystemInfoSync().windowHeight - 64
				return {
					'height': a + 'px',
					'margin-bottom': '10px'
				}
			},
			allStyle() {
				let height = uni.getSystemInfoSync().windowHeight
				return {
					'height': height,
					'display': 'flex',
					'flex-direction': 'column',
					'background-color': '#FAFAFA'
				}
			},
			getWHeight() {
				let width = uni.getSystemInfoSync().windowWidth
				let a = width * 0.22
				return a
			},
			getWidth() {
				let width = uni.getSystemInfoSync().windowWidth
				let a = width * 0.22
				let bi = 4 / 3
				let b = bi * a
				return b
			},
		},
		async mounted() {
			let that = this;
			that.isOk = false
			try {
				let params = {
					status: "Enabled",
					type: "SPONGE_FACILITY_TYPE"
				}
				await getDictionaryData(params).then(async tres => {
					if ("msgCode" in tres && (tres.msgCode == "1003" || tres.msgCode == "-401")) {
						that.notQxa = true
						that.notQxb = true
					} else {
						that.facilityType = tres;
						await getFacilityListByXmmc(that.queryParam).then(res => {
							if ("msgCode" in res && (res.msgCode == "1003" || res.msgCode ==
									"-401")) {
								that.notQxa = true
								that.notQxb = true
							} else {
								that.isOver = res.nextPage == 0 ? true : false
								that.facilityList = res.list.map(item => {
									item.facilities_type = that.facilityType.find(i => i
										.id == item.facilities_type).name;
									item.dqzt = item.dqzt == 0 ? "停用" : item.dqzt == 1 ?
										"在用" : "建设中";
									return item;
								});
								that.queryList = that.facilityList
							}
						}).catch(err => {
							that.notQxa = true
							that.notQxb = true
							that.isOk = true
						})
					}
					that.isOk = true
				}).catch(err => {
					that.notQxa = true
					that.notQxb = true
					that.isOk = true
				})
			} catch (e) {}
		}
	};
</script>
<style lang="scss" scoped>
	.list-item {
		height: 120px;
		// margin: 3px;
		background-color: white;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
		// border-radius: 8px;
		border: 1px solid #ebeef5
	}
</style>